<template>
  <Collapse v-model="currExpanded">
    <Panel name="Monday">
      <span>星期一</span>
      <div slot="content">
        <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 500 : ''"
               :size="tableSize" :data="data1" :columns="columns1"></Table>
      </div>
    </Panel>
    <Panel name="Tuesday">
      <span>星期二</span>
      <div slot="content">
        <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 500 : ''"
               :size="tableSize" :data="data1" :columns="columns1"></Table>
      </div>
    </Panel>
    <Panel name="Wednesday">
      <span>星期三</span>
      <div slot="content">
        <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 500 : ''"
               :size="tableSize" :data="data1" :columns="columns1"></Table>
      </div>
    </Panel>
    <Panel name="Thursday">
      <span>星期四</span>
      <div slot="content">
        <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 500 : ''"
               :size="tableSize" :data="data1" :columns="columns1"></Table>
      </div>
    </Panel>
    <Panel name="Friday">
      <span>星期五</span>
      <div slot="content">
        <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 500 : ''"
               :size="tableSize" :data="data1" :columns="columns1"></Table>
      </div>
    </Panel>
    <Panel name="Saturday">
      <span>星期六</span>
      <div slot="content">
        <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 500 : ''"
               :size="tableSize" :data="data1" :columns="columns1"></Table>
      </div>
    </Panel>
    <Panel name="Sunday">
      <span>星期天</span>
      <div slot="content">
        <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 500 : ''"
               :size="tableSize" :data="data1" :columns="columns1"></Table>
      </div>
    </Panel>
  </Collapse>
</template>
<script>

import { currDay } from '@/libs/tools'

export default {
  name: 'schedule-collapse',
  data () {
    return {
      currExpanded: [currDay()],
      data1: [
        {
          '_8B302': '2017-网络工程-1、2-计算机组成原理<br>' +
              '张洁<br>' +
              '周次：10/',
          '_8B303': '2017-网络工程-1、2-计算机组成原理<br>' +
              '张洁<br>' +
              '周次：10/',
          '_8B304': '1',
          // '_8B305': '305',
          // '_8B306': '306',
          // '_8B403': '403',
          // '_8B404': '',
          // '_8B405': '405',
          // '_8B407': '407',
          // '_8B408': '408',
          // '_8B409': '409',
          // '_8B413': '413',
          // '_9B108': '108',
          // '_9B201-1': '201-1',
          cellClassName: {
            '_8B302': 'custom-table-cell-style',
            '_8B303': 'custom-table-cell-style'
          }
        },
        {
          // '_8B302': '302',
          '_8B303': '2017-网络工程-1、2-计算机组成原理<br>' +
              '张洁<br>' +
              '周次：10/',
          '_8B304': '2017-网络工程-1、2-计算机组成原理<br>' +
              '张洁<br>' +
              '周次：10/',
          // '_8B305': '305',
          // '_8B306': '306',
          // '_8B403': '403',
          // '_8B404': '404',
          // '_8B405': '405',
          // '_8B407': '407',
          // '_8B408': '408',
          // '_8B409': '409',
          // '_8B413': '413',
          // '_9B108': '108',
          // '_9B201-1': '201-1',
          cellClassName: {
            '_8B303': 'custom-table-cell-style'
          }
        },
        {
          // '_8B302': '302',
          '_8B303': '2017-网络工程-1、2-计算机组成原理<br>' +
              '张洁<br>' +
              '周次：10/',
          '_8B304': '2017-网络工程-1、2-计算机组成原理<br>' +
              '张洁<br>' +
              '周次：10/',
          // '_8B305': '305',
          // '_8B306': '306',
          // '_8B403': '403',
          // '_8B404': '404',
          // '_8B405': '405',
          // '_8B407': '407',
          // '_8B408': '408',
          // '_8B409': '409',
          // '_8B413': '413',
          // '_9B108': '108',
          // '_9B201-1': '201-1',
          cellClassName: {
            '_8B303': 'custom-table-cell-style'
          }
        },
        {
          // '_8B302': '302',
          '_8B303': '2017-网络工程-1、2-计算机组成原理<br>' +
              '张洁<br>' +
              '周次：10/',
          '_8B304': '2017-网络工程-1、2-计算机组成原理<br>' +
              '张洁<br>' +
              '周次：10/',
          // '_8B305': '305',
          // '_8B306': '306',
          // '_8B403': '403',
          // '_8B404': '404',
          // '_8B405': '405',
          // '_8B407': '407',
          // '_8B408': '408',
          // '_8B409': '409',
          // '_8B413': '413',
          // '_9B108': '108',
          // '_9B201-1': '201-1',
          cellClassName: {
            '_8B303': 'custom-table-cell-style'
          }
        },
        {
          // '_8B302': '302',
          '_8B303': '2017-网络工程-1、2-计算机组成原理<br>' +
              '张洁<br>' +
              '周次：10/',
          '_8B304': '2017-网络工程-1、2-计算机组成原理<br>' +
              '张洁<br>' +
              '周次：10/',
          // '_8B305': '305',
          // '_8B306': '306',
          // '_8B403': '403',
          // '_8B404': '404',
          // '_8B405': '405',
          // '_8B407': '407',
          // '_8B408': '408',
          // '_8B409': '409',
          // '_8B413': '413',
          // '_9B108': '108',
          // '_9B201-1': '201-1',
          cellClassName: {
            '_8B303': 'custom-table-cell-style'
          }
        },
        {
          '_8B302': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          '_8B303': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          // '_8B304': '304',
          // '_8B305': '305',
          // '_8B306': '306',
          // '_8B403': '403',
          // '_8B404': '',
          // '_8B405': '405',
          // '_8B407': '407',
          // '_8B408': '408',
          // '_8B409': '409',
          // '_8B413': '413',
          // '_9B108': '108',
          // '_9B201-1': '201-1',
          cellClassName: {
            '_8B302': 'custom-table-cell-style',
            '_8B303': 'custom-table-cell-style'
          }
        },
        {
          '_8B302': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          '_8B303': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          // '_8B304': '304',
          // '_8B305': '305',
          // '_8B306': '306',
          // '_8B403': '403',
          // '_8B404': '',
          // '_8B405': '405',
          // '_8B407': '407',
          // '_8B408': '408',
          // '_8B409': '409',
          // '_8B413': '413',
          // '_9B108': '108',
          // '_9B201-1': '201-1',
          cellClassName: {
            '_8B302': 'custom-table-cell-style',
            '_8B303': 'custom-table-cell-style'
          }
        },
        {
          '_8B302': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          '_8B303': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          // '_8B304': '304',
          // '_8B305': '305',
          // '_8B306': '306',
          // '_8B403': '403',
          // '_8B404': '',
          // '_8B405': '405',
          // '_8B407': '407',
          // '_8B408': '408',
          // '_8B409': '409',
          // '_8B413': '413',
          // '_9B108': '108',
          // '_9B201-1': '201-1',
          cellClassName: {
            '_8B302': 'custom-table-cell-style',
            '_8B303': 'custom-table-cell-style'
          }
        },
        {
          '_8B302': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          '_8B303': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          // '_8B304': '304',
          // '_8B305': '305',
          // '_8B306': '306',
          // '_8B403': '403',
          // '_8B404': '',
          // '_8B405': '405',
          // '_8B407': '407',
          // '_8B408': '408',
          // '_8B409': '409',
          // '_8B413': '413',
          // '_9B108': '108',
          // '_9B201-1': '201-1',
          cellClassName: {
            '_8B302': 'custom-table-cell-style',
            '_8B303': 'custom-table-cell-style'
          }
        },
        {
          '_8B302': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          '_8B303': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          // '_8B304': '304',
          // '_8B305': '305',
          // '_8B306': '306',
          // '_8B403': '403',
          // '_8B404': '',
          // '_8B405': '405',
          // '_8B407': '407',
          // '_8B408': '408',
          // '_8B409': '409',
          // '_8B413': '413',
          // '_9B108': '108',
          // '_9B201-1': '201-1',
          cellClassName: {
            '_8B302': 'custom-table-cell-style',
            '_8B303': 'custom-table-cell-style'
          }
        },
        {
          '_8B302': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          '_8B303': '2017-网络工程-1、2-计算机组成原理<br>' +
            '张洁<br>' +
            '周次：10/',
          // '_8B304': '304',
          // '_8B305': '305',
          // '_8B306': '306',
          // '_8B403': '403',
          // '_8B404': '',
          // '_8B405': '405',
          // '_8B407': '407',
          // '_8B408': '408',
          // '_8B409': '409',
          // '_8B413': '413',
          // '_9B108': '108',
          // '_9B201-1': '201-1',
          cellClassName: {
            '_8B302': 'custom-table-cell-style',
            '_8B303': 'custom-table-cell-style'
          }
        }
      ],
      showBorder: true,
      showStripe: false,
      showHeader: true,
      showIndex: true,
      fixedHeader: true,
      tableSize: 'default'
    }
  },
  computed: {
    columns1 () {
      let columns = []
      if (this.showIndex) {
        columns.push({
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left'
        })
      }
      columns.push({
        type: 'html',
        title: '8B302',
        key: '_8B302',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B303',
        key: '_8B303',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B304',
        key: '_8B304',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B305',
        key: '_8B305',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B306',
        key: '_8B306',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B403',
        key: '_8B403',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B404',
        key: '_8B404',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B405',
        key: '_8B405',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B407',
        key: '_8B407',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B408',
        key: '_8B408',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B409',
        key: '_8B409',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B413',
        key: '_8B413',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '9B108',
        key: '_9B108',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '9B201-1',
        key: '_9B201-1',
        align: 'center',
        minWidth: 150
      })
      return columns
    }
  }
}
</script>

<style lang="less">
  @collapse-prefix-cls: ~"ivu-collapse";

  .custom-table-cell-style {
    background-color: #f0ffff !important;
    color: #276f86;
  }

  .@{collapse-prefix-cls} {
    border-radius: 1rem;
    background: #fff;

    &-item {
      border-top: 1px solid rgba(34, 36, 38, .15);
      .@{collapse-prefix-cls}-header {
        opacity: .5;
        border-bottom: none !important;
        font-weight: 700 !important;
      }
      &&-active {
        .@{collapse-prefix-cls}-header {
          opacity: 1;
        }
      }
      .@{collapse-prefix-cls}-content {
        background: transparent;
      }

      .ivu-table {
        &-wrapper {
          z-index: 0;
        }
        &-tbody {
          .ivu-table-cell {
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 0.825rem;
            font-weight: bold;
          }
        }
      }
    }

    &-item:nth-child(1) {
      .@{collapse-prefix-cls}-header {
        color: #db2828 !important;
      }
      border-top: none;
      .ivu-table-wrapper {
        border-top: .2em solid #db2828;
        border-radius: .3rem;
      }
    }

    &-item:nth-child(2) {
      .@{collapse-prefix-cls}-header {
        color: #f2711c !important;
      }
      .ivu-table-wrapper {
        border-top: .2em solid #f2711c;
        border-radius: .3rem;
      }
    }

    &-item:nth-child(3) {
      .@{collapse-prefix-cls}-header {
        color: #fbbd08 !important;
      }
      .ivu-table-wrapper {
        border-top: .2em solid #fbbd08;
        border-radius: .3rem;
      }
    }

    &-item:nth-child(4) {
      .@{collapse-prefix-cls}-header {
        color: #21ba45 !important;
      }
      .ivu-table-wrapper {
        border-top: .2em solid #21ba45;
        border-radius: .3rem;
      }
    }

    &-item:nth-child(5) {
      .@{collapse-prefix-cls}-header {
        color: #2185d0 !important;
      }
      .ivu-table-wrapper {
        border-top: .2em solid #2185d0;
        border-radius: .3rem;
      }
    }

    &-item:nth-child(6) {
      .@{collapse-prefix-cls}-header {
        color: #6435c9 !important;
      }
      .ivu-table-wrapper {
        border-top: .2em solid #6435c9;
        border-radius: .3rem;
      }
    }

    &-item:nth-child(7) {
      .@{collapse-prefix-cls}-header {
        color: #e03997 !important;
      }
      .ivu-table-wrapper {
        border-top: .2em solid #e03997;
        border-radius: .3rem;
      }
    }
  }
</style>
